Einsendeaufgabe zu MMDE10K

A. Praxisaufgabe

Gehen Sie bitte von einem sehr einfachen, zweispaltigen Layout aus (basierend auf dem Standardlayout aus dem Kapitel "CSS-Layout" – jedoch ohne Header und Footer). Entwickeln Sie daraus ein Layout, das für Smartphones optimiert ist und folgende Eigenschaften besitzt:

• "festes" Layout mit 800px
• ein externes Stylesheet mit @media-Block.
• ein zusätzliches Bild Ihrer Wahl, das rechts vom Text umflossen wird und das Verhalten von "Fluid Images" besitzt. Verwenden Sie ein Bild mit ausreichender Breite (ca. 450px), damit man den Effekt auch sehen kann.

Sehen Sie sich bitte als Beispiel die beiden folgenden Abbildungen einer Webseite an, wie sie von Firefox in einem breiteren und einem schmaleren "Smartphone-ähnlichen" Fenster dargestellt wird. Entwickeln Sie bitte nach dieser Vorlage ein HTML-Dokument smartphone-aufgabe.html mit einem zugehörigen externen Stylesheet mystyles.css. Dabei müssen Sie weder dieselben Maße einhalten noch genau dieser Farbgebung folgen. Das Layout sollte aber diesem Muster entsprechen. Sie finden alle benötigten Informationen in den beiden vorgestellten Praxisbeispielen.

Bitte vermeiden Sie HTML-Syntaxfehler: Wenn Sie sich den Quellcode via Firefox ansehen (Extras >Webentwickler >Seitenquelltext – bzw. [Strg+U] anzeigen), werden die meisten Syntaxfehler in Rot dargestellt. Vermeiden Sie bitte ebenfalls CSS-Syntaxfehler: Diese werden zuverlässig vom Web Developer Toolbar für Firefox erkannt.

B. Multiple Choice

Bitte beantworten Sie die folgenden 10 Fragen durch Ankreuzen der richtigen Antwort. Zu jeder Frage gibt es nur eine (!) richtige Antwort. Bitte erfassen Sie die -Lösungen der MC-Fragen digital: Schreiben Sie dazu bitte die Lösung in ein Textdokument. Reichen Sie die Lösung zu Teil A und zu Teil B bitte zusammen ein. Bitte lesen Sie sich die Fragen aufmerksam durch, bevor Sie antworten.

Viel Erfolg!

• 1. Frage: Warum gibt es kein einheitliches App-Angebot für die verschiedenen Smartphones?
  • a) O Das liegt an den unterschiedlichen Abmessungen der Displays.
  • b) O Das liegt an der unterschiedlichen Pixeldichte der Displays.
  • c) x Native Apps müssen speziell für das jeweilige Endgerät in der -passenden Programmiersprache programmiert werden.
  • d) O Das liegt an den unterschiedlichen Versionen des Android-Betriebssystems.
• 2. Frage: Welches ist keine notwendige Maßnahme zur Optimierung von Webseiten für das mobile Web?
  • a) O Linearisierung des Layouts.
  • b) x Definition von Seitenumbrüchen.
  • c) O Ausblenden unwichtiger Seitenelemente.
  • d) O Reduktion von Außen- und Innenabständen.
• 3. Frage: Welche Abfrage der folgenden Media Queries trifft auf Tablet-PCs zu?
  • a) O media="all and (min-width: 600px)"
  • b) x media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)"
  • c) O @media screen and (max-device-width: 480px)
  • d) O media="handheld"
• 4. Frage: Welche Aussage ist falsch?
  • a) O Mit dem Meta-Tag viewport kann festgelegt werden, ob der -Benutzer die Website skalieren darf.
  • b) O Mit dem Meta-Tag viewport lässt sich die minimale und maximale Skalierung festlegen.
  • c) x Mit dem Meta-Tag viewport können Probleme bei Displays mit besonders hoher Pixeldichte behoben werden.
  • d) O Mit dem Meta-Tag viewport kann der Viewport auf die Größe des tatsächlichen Geräte-Displays festgelegt werden.
• 5. Frage: Welche Aussage ist falsch?
  • a) O Container mit der Eigenschaft float müssen eine festgelegte -Breite haben.
  • b) O Nur Blockelemente können umflossen werden.
  • c) O Die Nachbarelemente von gefloateten Elementen müssen immer einen Außenabstand in der Breite des gefloateten Elements haben.
  • d) x Damit gefloatete Elemente unter allen Umständen von ihrem äußeren Container vollständig eingeschlossen werden, muss das Floaten explizit beendet werden.
• 6. Frage: Mit welcher Codezeile wird ein flüssiges Layout definiert?
  • a) x #holder {width: 100%; min-width: 980px; max-width: 1400px;}
  • b) O img {max-width: 100%;}
  • c) O media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"
  • d) O #holder {clear:both; display:block; width:100%; float:none;}
• 7. Frage: Worauf muss man beim Layout-Entwurf auf HTML-Ebene in Bezug auf mobile Geräte nicht achten?
  • a) O Eine konsequente Trennung von Struktur und Gestaltung.
  • b) x Die Gesamtzahl der Container im Layout sollte möglichst gering gehalten werden.
  • c) O Ein semantisch strukturierter und validierter HTML-Code ohne Tabellen oder Frames.
  • d) O Beim linearisierten Layout erscheinen die Elemente entsprechend ihrer Reihenfolge im HTML-Code. Das kann bedeuten, dass unwichtige Inhalte am Seitenanfang dargestellt werden.
• 8. Frage: Mit welcher Codezeile kann ein Layout linear gemacht werden?
  • a) x .brclear {clear:both; height:0; margin:0;}
  • b) O body {-webkit-text-size-adjust:none; -margin:0; padding:0 }
  • c) O #holder, #nav, #content, {clear:both; width:100%; float:none;}
  • d) O * {margin: 0; padding: 0; }
• 9. Frage: Was ist die Zielsetzung von Paketen wie SproutCore Touch und jQuery mobile?
  • a) O Vorlage für Webprojekte auf der Basis von HTML 5 bereitzu-stellen.
  • b) O Nützliche „Snippets“ mit CSS-Code bereitzustellen.
  • c) O Die Verwaltung von Media Queries zu vereinfachen.
  • d) x Mobile Webseiten mit dem „Look&Feel“ nativer Apps zu implementieren.
• 10. Frage: Welche Aussage ist richtig?
  • a) O Um den Emulator für Opera Mobile 10 nutzen zu können, muss vorher die entsprechende SDK installiert werden.
  • b) O Voraussetzung für die Nutzung der iPhone-SDK ist die Registrierung als -Appleentwickler.
  • c) O Der kostenlose Android-Emulator von Google ist nur für Windows verfügbar.
  • d) x Sowohl das iPhone als auch alle Android-Geräte können vollständig unter Windows emuliert werden.